<template>
	<view class="exchange_particulars">
		<!-- 商品信息 -->
		<view class="head-box">
			<view class="order-state">
				{{orderDetail.type == 1 ? orderDetail.status_take_name : orderDetail.status_sale_name}}
			</view>
			<view class="goods-info">
				<view class="c-info">
					<image class="img" :src="$util.img(orderDetail.sku_img)"></image>
					<view class="g-c-box">
						<view class="name-num">
							<view class="goods-name">{{orderDetail.sku_name}}</view>
							<view class="goods-num">x{{orderDetail.num}}</view>
						</view>
						<view class="left-b">
							<text class="text">兑换券</text>
							<text class="text red">{{orderDetail.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-view">
			<view class="body-info">
				<view class="item-box">
					<view class="item-name">订单号</view>
					<view class="item-c">{{orderDetail.order_no}}</view>
				</view>
				<view class="item-box">
					<view class="item-name">兑换时间</view>
					<view class="item-c">{{orderDetail.create_time}}</view>
				</view>
				<view class="item-box" v-if="orderDetail.type == 2">
					<view class="item-name">预估到账</view>
					<view class="item-c">{{orderDetail.expect_money}}</view>
				</view>
				<view class="item-box" v-if="orderDetail.finish_time">
					<view class="item-name">完成时间</view>
					<view class="item-c">{{orderDetail.finish_time}}</view>
				</view>
			</view>
			<view class="body-info" v-if="orderDetail.type == 1 && orderDetail.delivery_no">
				<view class="body-title">物流信息</view>
				<view class="item-box">
					<view class="item-name">快递公司</view>
					<view class="item-c">{{orderDetail.express_company_name}}</view>
				</view>
				<view class="item-box">
					<view class="item-name">快递单号</view>
					<view class="item-c">{{orderDetail.delivery_no}}</view>
				</view>
			</view>
			<view class="body-info">
				<block v-if="orderDetail.type == 1">
					<view class="body-title">收货信息</view>
					<view class="item-box">
						<view class="item-name">姓名</view>
						<view class="item-c">{{orderDetail.address_name}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">电话</view>
						<view class="item-c">{{orderDetail.address_mobile}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">地址</view>
						<view class="item-c">{{orderDetail.address}}</view>
					</view>
				</block>
				<block v-else>
					<view class="body-title">收款信息</view>
					<view class="item-box">
						<view class="item-name">姓名</view>
						<view class="item-c">{{orderDetail.account_name}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">身份证号码</view>
						<view class="item-c">{{orderDetail.idcard_number}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">手机号</view>
						<view class="item-c">{{orderDetail.account_mobile}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">银行名称</view>
						<view class="item-c">{{orderDetail.account_bank_name}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">收款账户</view>
						<view class="item-c">{{orderDetail.account_bank_account}}</view>
					</view>
				</block>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				orderDetail: {}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				this.getOrderDetail();
			}
		},
		methods: {
			getOrderDetail() {
				this.$api.sendRequest({
					url: '/exchange/api/order/orderDetail',
					data: {
						id: this.id
					},
					success: res => {
						if (res.code == 0) {
							this.orderDetail = res.data;
						} else {
							this.$util.showToast({
								title: res.message
							})
							setTimeout(function() {
								this.$util.goBack();
							}, 1000);
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.exchange_particulars {
		.head-box {
			width: 100vw;
			height: 358rpx;
			background: linear-gradient(180deg, #FC311A 0%, #F5F5F5 100%);

			.order-state {
				padding-left: 48rpx;
				padding-top: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 50rpx;
			}

			.goods-info {
				margin-top: 46rpx;
				padding: 0 24rpx;

				.c-info {
					padding: 24rpx 32rpx 46rpx 24rpx;
					background-color: #FFFFFF;
					border-radius: 8rpx;
					display: flex;

					.img {
						max-width: 144rpx;
						min-width: 144rpx;
						height: 144rpx;
					}

					.g-c-box {
						margin-left: 24rpx;

						.name-num {
							display: flex;

							.goods-name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #222222;
								line-height: 33rpx;
								margin-right: 40rpx;
							}

							.goods-num {
								margin-top: -10rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #999999;
								line-height: 50rpx;
							}
						}

						.left-b {
							margin-top: 16rpx;

							.text {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
								line-height: 50rpx;
							}

							.red {
								margin-left: 10rpx;
								color: #FC311A;
							}
						}
					}

				}
			}
		}

		.padding-view {
			padding: 0 24rpx;
			margin-top: 20rpx;

			.body-info {
				padding: 32rpx 24rpx 1rpx 24rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				.body-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #222222;
					line-height: 38rpx;
					margin-bottom: 24rpx;
				}
			}
		}
	}

	.item-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;

		.item-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #777777;
			line-height: 33rpx;
			min-width: 80rpx;
		}

		.item-c {
			margin-left: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			line-height: 33rpx;
		}
	}
</style>